<!DOCTYPE html>
<html>

<head>
    <title>统计首页</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/dark.js"></script>
</head>
<style>
</style>

<body>
	<div class="navTop">
		<a href="#" class="logoimg"><img src="/img/logo.png" alt=""></a>
		<div class="nav_right">
			<a href="/home" class="nav_icon indexicon"></a>
			<a href="/member.html" class="nav_icon userlisticon"></a>
			<a href="/host.html" class="nav_icon servericon"></a>
			<a href="javascript:void(0);" class="nav_icon logouticon"></a>
		</div>
	</div>
    <div class="mainContent">
    	<div class="items userbg"><a href="member.html">
			<div class="irow_title">用户列表</div>
			<div id="user" class="irow_textbox"></div>
		</a></div>
	    <div class="items serverbg"><a href="host.html">
			<div class="irow_title">备份服务器数量</div>
			<div id="host" class="irow_textbox"></div>
		</a></div>
	    <div class="items chart_items" id="order"></div>
	    <div class="items chart_items" id="invite"></div>
    </div>
</body>

</html>
<script type="text/javascript">
/*
	用户统计
*/
$.ajax({
    url: "/home/member-count",
    datatype: "json",
    type: "get",
    success: function(res) {
        $("#user").html("目前总人数:<span>" + res.msg +"</span>")
    }
})
/*
	订单统计
*/

var orderChart = echarts.init(document.getElementById('order'));
orderChart.title = '用户订单统计';
$.ajax({
    url: "/home/order-count",
    datatype: "json",
    type: "get",
    success: function(res) {
        var order = res.msg;
        var order_kv = [];
        var marks = [];
        var total = 0;
        for (var key in order) {
            marks[key] = order[key].mark;
            total += parseInt(order[key].count)
            order_kv[key] = { value: parseInt(order[key].count), name: order[key].mark }
        }
        orderChart.setOption({
            title: {
                text: '用户订单统计',
                subtext: '订单总数量：' + total,
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: marks
            },
            series: [{
                name: '数据来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: order_kv,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        })


    }
})

orderChart.on('click', function(params) {
    window.location.href = "order.html?mark=" + params.name
});



/*
	邀请记录
*/
var inviteChart = echarts.init(document.getElementById('invite'));
inviteChart.title = '邀请链接记录';
$.ajax({
    url: "/home/invite-count",
    datatype: "json",
    type: "get",
    success: function(res) {
        var order = res.msg;
        var order_kv = [];
        var marks = [];
        var total = 0;
        for (var key in order) {
            marks[key] = order[key].mark;
            total += parseInt(order[key].count)
            order_kv[key] = { value: parseInt(order[key].count), name: order[key].mark }
        }
        inviteChart.setOption({
            title: {
                text: '邀请链接记录',
                subtext: '总记录数:' + total,
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: marks
            },
            series: [{
                name: '数据来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: order_kv,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        })


    }
})

inviteChart.on('click', function(params) {
    window.location.href = "inviter.html?mark=" + params.name
});


/*
	服务器数量统计
*/
$.ajax({
    url: "/home/host-count",
    datatype: "json",
    type: "get",
    success: function(res) {
        if (res.success == 0) {
            $("#host").html("备份服务器数量：<span>" + res.msg +"</span>")
        } else {
            $("#host").html("<span style='color:red'>" + res.msg + "</span>")
        }
    }
})
</script>